<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="nav-left">
        <span class="location">当前位置: 阳光社区</span>
        <span class="weather">天气: 晴 25°C</span>
      </div>
      <div class="nav-right">
        <span class="search-icon" @click="showSearchBox">
          <i class="fas fa-search"></i>
        </span>
        <span class="scan-icon" @click="scanQRCode">
          <i class="fas fa-qrcode"></i>
        </span>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-box" v-if="showSearch">
      <input type="text" placeholder="搜索活动..." class="search-input">
      <span class="search-icon"></span>
    </div>

    <!-- 图标按钮 -->
    <div class="icon-buttons">
      <button class="icon-button">找活动</button>
      <button class="icon-button">找组织</button>
      <button class="icon-button">证书领取</button>
      <button class="icon-button">志愿排名</button>
    </div>

    <!-- 图片轮播 -->
    <div class="carousel-container">
      <div class="carousel">
        <div class="carousel-item" v-for="(item, index) in carouselItems" :key="index"
          :class="{ 'active': currentSlide === index }" @click="goToCarouselItem(item.link)">
          <img :src="item.image" :alt="item.title" class="carousel-image">
          <div class="carousel-caption">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </div>
        <button class="carousel-control prev" @click="prevSlide">&lt;</button>
        <button class="carousel-control next" @click="nextSlide">&gt;</button>
      </div>
    </div>

    <!-- 推荐活动 -->
    <div class="header">
      <h1>推荐活动</h1>
      <div class="search-box">
        <input type="text" placeholder="搜索活动..." class="search-input">
        <span class="search-icon">🔍</span>
      </div>
    </div>
    <div class="activities-container">
      <activity-card v-for="activity in recommendedActivities" :key="activity.id" :activity="activity"
        @click.native="goToActivity(activity.id)" />
    </div>

    <!-- 主题活动 -->
    <div class="special-sections">
      <h2>主题活动</h2>
      <div class="activities-container">
        <activity-card v-for="activity in themeActivities" :key="activity.id" :activity="activity"
          @click.native="goToActivity(activity.id)" />
      </div>
    </div>

    <!-- 志愿有礼 -->
    <div class="special-sections">
      <h2>志愿有礼</h2>
      <div class="activities-container">
        <activity-card v-for="activity in rewardActivities" :key="activity.id" :activity="activity"
          @click.native="goToActivity(activity.id)" />
      </div>
    </div>

    <!-- 底部导航栏
    <div class="bottom-nav">
      <div class="nav-item" @click="navigateTo('home')">
        <span class="icon">🏠</span>
        <span class="label">首页</span>
      </div>
      <div class="nav-item" @click="navigateTo('recommendation')">
        <span class="icon">📖</span>
        <span class="label">推荐</span>
      </div>
      <div class="nav-item" @click="navigateTo('activities')">
        <span class="icon">🎉</span>
        <span class="label">活动</span>
      </div>
      <div class="nav-item" @click="navigateTo('hotspots')">
        <span class="icon">🔥</span>
        <span class="label">热点</span>
      </div>
    </div> -->
    <div v-for="activity in activities" :key="activity.id" class="activity-item">
      <img :src="activity.image" :alt="activity.title" class="activity-image">
      <div class="activity-info">
        <h2>{{ activity.title }}</h2>
        <p class="activity-time">{{ activity.time }}</p>
        <p class="activity-location">{{ activity.location }}</p>
        <p class="activity-status" :class="{'status-active': activity.status === '报名中'}">{{ activity.status }}</p>
        <p class="activity-participants">参与人数: {{ activity.participants }}</p>
      </div>
      <button @click="goToActivity(activity)">查看详情</button>
    </div>
  </div>
  
  
</template>

<script>
import ActivityCard from '@/components/ActivityCard.vue';

export default {
  name: 'Home',
  components: {
    ActivityCard
  },
  data() {
    return {
      showSearch: false,
      currentSlide: 0,
      // 示例活动数据 - 实际应用中可能从API获取
      recommendedActivities: [
        {
          id: 1,
          title: '社区清洁日',
          time: '2023-10-15 09:00',
          location: '阳光社区公园',
          status: '报名中',
          participants: 45,
          image: 'https://picsum.photos/seed/cleanup/100/100.jpg',
          description: '一起来清理社区公园，让环境更美好！'
        },
        {
          id: 2,
          title: '敬老院慰问',
          time: '2023-10-20 14:00',
          location: '幸福敬老院',
          status: '报名中',
          participants: 20,
          image: 'https://picsum.photos/seed/elderly/100/100.jpg',
          description: '为老人们带去温暖和欢乐'
        },
        {
          id: 3,
          title: '义务植树',
          time: '2023-11-05 08:30',
          location: '森林公园',
          status: '即将开始',
          participants: 60,
          image: 'https://picsum.photos/seed/planting/100/100.jpg',
          description: '为地球增添一抹绿色'
        }
      ],
      themeActivities: [
        {
          id: 4,
          title: '环保讲座',
          time: '2023-10-18 19:00',
          location: '市民文化中心',
          status: '报名中',
          participants: 30,
          image: 'https://picsum.photos/seed/lecture/100/100.jpg',
          description: '了解环保知识，共建绿色家园'
        },
        {
          id: 5,
          title: '公益跑',
          time: '2023-11-12 07:00',
          location: '滨江公园',
          status: '报名中',
          participants: 200,
          image: 'https://picsum.photos/seed/run/100/100.jpg',
          description: '用脚步丈量公益，为健康加油'
        }
      ],
      rewardActivities: [
        {
          id: 6,
          title: '图书捐赠',
          time: '2023-10-25 10:00',
          location: '社区图书馆',
          status: '报名中',
          participants: 15,
          image: 'https://picsum.photos/seed/books/100/100.jpg',
          description: '捐赠闲置图书，传递知识力量'
        },
        {
          id: 7,
          title: '技能分享会',
          time: '2023-11-08 15:00',
          location: '青年活动中心',
          status: '报名中',
          participants: 25,
          image: 'https://picsum.photos/seed/skills/100/100.jpg',
          description: '分享你的技能，帮助他人成长'
        }
      ],
      carouselItems: [
        {
          title: '志愿者招募',
          description: '加入我们，一起做公益',
          image: 'https://picsum.photos/seed/volunteer/300/200.jpg',
          link: '/volunteer'
        },
        {
          title: '环保行动',
          description: '保护环境，从我做起',
          image: 'https://picsum.photos/seed/environment/300/200.jpg',
          link: '/environment'
        },
        {
          title: '社区服务',
          description: '服务社区，传递温暖',
          image: 'https://picsum.photos/seed/community/300/200.jpg',
          link: '/community'
        },
        {
          title: '公益活动',
          description: '用爱心改变世界',
          image: 'https://picsum.photos/seed/charity/300/200.jpg',
          link: '/charity'
        },
        {
          title: '志愿者培训',
          description: '提升技能，更好地服务',
          image: 'https://picsum.photos/seed/training/300/200.jpg',
          link: '/training'
        }
      ]
    };
  },
  methods: {
    goToActivity(activity) {
      this.$router.push({
        name: 'ActivityDetail',
        params: { id: activity.id }
      });
    },
    showSearchBox() {
      this.showSearch = !this.showSearch;
    },
    scanQRCode() {
      alert('扫描二维码功能');
    },
    goToActivity(id) {
      // 使用Vue Router进行页面跳转
      this.$router.push({ name: 'ActivityDetail', params: { id: id } });
    },
    goToCarouselItem(link) {
      alert(`跳转到轮播项链接: ${link}`);
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.carouselItems.length;
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.carouselItems.length) % this.carouselItems.length;
    },
    navigateTo(page) {
      // 这里可以添加导航逻辑，例如:
      // this.$router.push({ name: page });
      alert(`导航到: ${page}`);
    }
  },
  mounted() {
    this.nextSlide();
    setInterval(this.nextSlide, 5000); // 每5秒自动切换一次
  }
};
</script>

<style scoped>
.home {
  padding: 10px;
  padding-bottom: 70px;
  /* 增加底部内边距，为底部导航栏留出更多空间 */
  overflow: hidden;
  /* 防止内容溢出 */
}

.banner {
  background-color: #f5f5f5;
  padding: 10px 0;
  text-align: center;
  color: #666;
  margin-bottom: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.header h1 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.search-box {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 8px 15px;
  margin: 10px 0;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
}

.search-icon {
  font-size: 16px;
  color: #999;
}

.icon-buttons {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
}

.icon-button {
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  padding: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #f5f5f5;
  transition: all 0.3s;
}

.icon-button:hover {
  background-color: #e8e8e8;
}

.activities-container {
  margin-top: 10px;
}

.special-sections {
  margin-top: 20px;
}

.special-sections h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* 轮播图样式 */
.carousel-container {
  position: relative;
  margin: 15px 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel {
  position: relative;
  width: 100%;
  height: 200px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
  display: block;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
}

.carousel-caption h3 {
  margin: 0;
  font-size: 16px;
}

.carousel-caption p {
  margin: 5px 0 0;
  font-size: 12px;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  /* 确保控制按钮在轮播图上方 */
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}

/* 底部导航栏样式 - 修改了这里 */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  background-color: #f8f9fa;
  padding: 12px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* 确保底部导航栏在最上层 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}

.bottom-nav .nav-item:hover {
  color: #409eff;
}

.bottom-nav .icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.bottom-nav .label {
  font-size: 12px;
}

/* 确保ActivityCard的样式覆盖 */
.activity-card {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.activity-card:hover {
  transform: translateY(-3px);
}

.card-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.card-content {
  padding: 12px;
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.card-time,
.card-location {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
}

.card-status {
  color: #f56c6c;
}

.card-people {
  color: #909399;
}
</style>
